<template>
  <div id="app">
    <template v-if="is_ie9==false">
      <router-view/>
    </template>
    <template v-else>
      {{ this.ie9Tips() }}
    </template>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import publicJs from './util/js/public.js'
  export default {
    name: 'App',
    data() {
      return {
        devWidth: document.body.clientWidth,
        devHeight: document.body.clientHeight
      }
    },
    watch: {
      devWidth(val) {
        console.log(val,document.body.clientWidth)
        if (val >= 1570) {
          val = 750
        }
        if (val < 1570 && val >= 1400) {
          val = 630
        }
        if (val < 1400 && val >= 1250) {
          val = 532.5
        }
        if (val < 1250 && val >= 1200) {
          val = 480
        }
        console.log(val)
        document.documentElement.style.fontSize = (val / 7.5) + 'px'
      }
    },
    computed: mapState(['screenWidth', 'screenHeight', 'tabIndex', 'activeTabIndex', 'is_ie9']),
    mounted() {
      document.documentElement.style.fontSize = (publicJs.screenWidth() / 7.5) + 'px'
      window.onresize = () => {
        return (() => {
          this.devWidth = document.body.clientWidth;
          this.devHeight = document.body.clientHeight;
          this.$store.commit('screenWidth', this.devWidth);
          this.$store.commit('screenHeight', this.devHeight);
        })()
      }

      console.log('is_ie9', this.is_ie9)
    },
    methods: {
      ie9Tips() {
        this.$confirm('你的浏览器版本过低,请下载最新版本,或使用谷歌浏览器体验最好的效果', '浏览器低版本提示', {
          confirmButtonText: '下载360急速浏览器',
          cancelButtonText: '下载Google浏览器',
          type: 'warning',
          showClose: false
        }).then(() => {
          window.location.href = "https://browser.360.cn/ee/";
        }).catch(() => {
          window.location.href = "http://chrome.xiangtatech.com/";
        });
      }
    }
  }
</script>

<style lang="less">
  * {
    margin: 0;
    padding: 0;
  }
  html {
    font-size: 100px;
  }
  html,
  body,
  #app {
    width: 100%;
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    font-size: .16rem;
  }
</style>
